<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Table Edits jQuery Plugin</title>
    <meta name="description" content="">
    <meta name="author" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">

    <link rel="stylesheet" href="bower_components/skeleton/css/normalize.css">
    <link rel="stylesheet" href="bower_components/skeleton/css/skeleton.css">
    <link rel="stylesheet" href="bower_components/pikaday/css/pikaday.css">
    <link rel="stylesheet" href="bower_components/pikaday-skeleton/css/pikaday-skeleton.css">
    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css">

    <style>
        body {
            margin-bottom: 100px;
        }

        .row {
            margin-bottom: 20px;
        }

        pre {
            margin-top: 0;
        }

        .button.button-small {
            height: 30px;
            line-height: 30px;
            padding: 0px 10px;
        }

        td input[type=text], td select {
            width: 100%;
            height: 30px;
            margin: 0;
            padding: 2px 8px;
        }

        th:last-child {
            text-align: right;
        }

        td:last-child {
            text-align: right;
        }

        td:last-child .button {
            width: 30px;
            height: 30px;
            text-align: center;
            padding: 0px;
            margin-bottom: 0px;
            margin-right: 5px;
            background-color: #FFF;
        }

        td:last-child .button .fa {
            line-height: 30px;
            width: 30px;
        }
    </style>
</head>
<body>
<a href="https://github.com/nathancahill/table-edits"><img style="position: absolute; top: 0; right: 0; border: 0;"
                                                           src="https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67"
                                                           alt="Fork me on GitHub"
                                                           data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png"></a>

<div class="container">
    <div class="row">
        <div class="twelve columns" style="margin-top: 5%">
            <h4>$.Table Edits</h4>
            <p>
                Table Edits is a lightweight jQuery plugin for making table rows editable.
                Built as minimally as possible so it's easy to extend.
            </p>
            <table class="u-full-width demo">
                <thead>
                <tr>
                    <th>Name</th>
                    <th>Birthday</th>
                    <th>Age</th>
                    <th>Sex</th>
                    <th>Edit</th>
                </tr>
                </thead>
                <tbody>
                <tr data-id="1">
                    <td data-field="name">Dave Gamache</td>
                    <td data-field="birthday">May 19, 2015</td>
                    <td data-field="age">26</td>
                    <td data-field="sex">Male</td>
                    <td>
                        <a class="button button-small edit" title="Edit">
                            <i class="fa fa-pencil"></i>
                        </a>
                    </td>
                </tr>
                <tr data-id="2">
                    <td data-field="name">Dwayne Johnson</td>
                    <td data-field="birthday">May 19, 2015</td>
                    <td data-field="age">42</td>
                    <td data-field="sex">Male</td>
                    <td>
                        <a class="button button-small edit" title="Edit">
                            <i class="fa fa-pencil"></i>
                        </a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="row">
        <div class="six columns">
            <p>
                <strong>Table Edits</strong> only does a couple things:
            <ul>
                <li>Replaces cell values with input fields on edit</li>
                <li>Handles row editing state</li>
                <li>Fires callbacks for edit, save and cancel</li>
            </ul>
            And <strong>optionally</strong>, a couple more:
            <br/><br/>
            <ul>
                <li>Binds a button or double click to start editing</li>
                <li>Binds enter and escape keys to save and cancel</li>
                <li>Maintains column widths when switching to edit</li>
                <li>Create select fields instead of input fields</li>
            </ul>
            </p>
        </div>
        <div class="six columns">
<pre><code>$("table tr").editable({
    keyboard: true,
    dblclick: true,
    button: true,
    buttonSelector: ".edit",
    dropdowns: {},
    maintainWidth: true,
    edit: function(values) {},
    save: function(values) {},
    cancel: function(values) {}
});</code></pre>
        </div>
    </div>
    <div class="row">
        <div class="twelve columns">
            <p>
                The only additional markup <strong>Table Edits</strong> requires
                is a <code>data-field</code> attribute on each editable cell with it's column name.
            </p>
        </div>
    </div>
    <div class="row">
        <div class="six columns">
            <h5>Saving Table Data</h5>
            <p>
                Table Edits makes it easy to save edits. Callbacks are passed a <code>values</code>
                object with column names and values of the edited row.
                <br/><br/>
                Posting the new data to an API endpoint is simple.
            </p>
        </div>
        <div class="six columns">
<pre><code>$("table tr").editable({
    save: function(values) {
      var id = $(this).data('id');
      $.post('/api/object/' + id, values);
    }
});</code></pre>
        </div>
    </div>
</div>

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/momentjs/moment.js"></script>
<script src="bower_components/pikaday/pikaday.js"></script>
<script src="build/table-edits.min.js"></script>
<script>
    $(function () {
        var pickers = {};

        $('table tr').editable({
            dropdowns: {
                sex: ['Male', 'Female']
            },
            edit: function (values) {
                $(".edit i", this)
                    .removeClass('fa-pencil')
                    .addClass('fa-save')
                    .attr('title', 'Save');

                pickers[this] = new Pikaday({
                    field: $("td[data-field=birthday] input", this)[0],
                    format: 'MMM D, YYYY'
                });
            },
            save: function (values) {
                $(".edit i", this)
                    .removeClass('fa-save')
                    .addClass('fa-pencil')
                    .attr('title', 'Edit');

                if (this in pickers) {
                    pickers[this].destroy();
                    delete pickers[this];
                }
            },
            cancel: function (values) {
                $(".edit i", this)
                    .removeClass('fa-save')
                    .addClass('fa-pencil')
                    .attr('title', 'Edit');

                if (this in pickers) {
                    pickers[this].destroy();
                    delete pickers[this];
                }
            }
        });
    });
</script>
</body>
</html>
